<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas width="800" height="600"></canvas>
    <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');

        let img = document.createElement('img');
        img.src = '../00-assets/imgs/gouwuche1.png';

        /*
            创建图案样式pattern,调用createPattern方法
                参数1: img元素本身
                参数2: 重复方式
            不过注意，想要在canvas里加载图片，务必要写在img.onload事件里，因为图片不加载，canvas是识别不到这个图片的
        */
        img.onload = function () {
            let p = ctx.createPattern(img, 'repeat');
            ctx.fillStyle = p;
            ctx.fillRect(0, 0, 800, 600)
        }
    </script>
</body>

</html>